<template>
  <div class="main">
    <nav-bar :title="title" addbtn class="navBar"></nav-bar>

    <div class="appeal-main">
      <van-search
        background="#f6f6f6"
        v-model="name"
        placeholder="诉求人姓名"
        :left-icon="searchLeftIcon"
        clearable
        @search="search(name)"
      />

      <ul v-for="(item, index) in treeData" :key="index" @click="detail(index)">
        <li>
          <div class="left">
            <div class="name">
              <span>姓名:</span>
              {{ item.name }}
            </div>
            <div class="sex">
              <span>性别:</span>
              {{ item.sexName }}
            </div>
            <div class="age">
              <span>年龄:</span>
              {{ item.age }}
            </div>
            <div class="phone">
              <span>联系方式:</span>
              {{ item.phone }}
            </div>
            <div class="address">
              <span>住址:</span>
              {{ item.address }}
            </div>
          </div>
          <div class="right">
            <span>详情:</span>
            <div>{{ item.detailInfo }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import propertyManagement from '@/api/propertyManagement'
export default {
  data() {
    return {
      title: '诉求服务',
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      searchOptionStr: '',
      loading: false,
      finished: false,
      treeData: '',
      name: '',
      local: []
    }
  },
  mounted() {
    this.getGrid()
  },
  methods: {
    getGrid(name) {
      propertyManagement.Init.grid({
        name: this.name
      }).then(res => {
        console.log(res.data.data.list, '诉求列表==============')
        if (res.data.status === 0) {
          this.treeData = res.data.data.list
        }
      })
    },
    search(name) {
      this.getGrid(name)
    },
    detail(i) {
      console.log('index->>>>>>>>', i)
      console.log('treeData-----------code>', this.treeData[i].code)
      // if(this.treeData){

      // }
      this.$store.commit('getAppeal', this.treeData[i])
      this.$router.push({
        path: '/propertyManagement/AttendanceClock/Detail'
      })
    }
  }
}
</script>

<style scoped lang="less">
.main {
  background: rgb(246, 246, 246);
  .appeal-main {
    width: 100%;
    margin-top: 100px;
    padding: 0 0 200px 0;
  }
  ul {
    margin-bottom: 15px;
    padding: 0 30px;
    border-radius: 8px;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    font-family: PingFangSC-Regular;
    li {
      height: 300px;
      display: flex;
      background-color: #fff;
      padding: 0 10px;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        div {
          margin-bottom: 10px;
          span {
            margin-right: 10px;
          }
        }
      }
      .right {
        flex: 1;
        overflow: hidden;
        padding: 10px 0 0 0;
        div {
          display: flex;
          flex-wrap: wrap;
          display: -webkit-box; /**对象作为伸缩盒子模型展示**/
          -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
          -webkit-line-clamp: 8; /**显示的行数**/
          overflow: hidden; /**隐藏超出的内容**/
        }
      }
    }
  }
}
</style>
